<template>
    <div class="right-content">
      <!-- 头部查询区域 -->
        <el-form :inline="true" :model="dataForm2" class="demo-form-inline">
          <el-form-item style="right: 100px">
              <el-button type="primary" class="defineC" @click="cimsInputClick">定义流程</el-button>
              <el-button type="primary" class="defineC" @click="cimsInputClick2">上传流程</el-button>
              <el-button type="primary" v-if="flag===0" @click="handleLookHistory()">已部署的流程</el-button>
              <el-button type="primary" v-else @click="getDataList()">已上传的的流程</el-button>
          </el-form-item>
        </el-form>
        <!-- 内容区域 -->
        <el-table
          ref="multipleTable"
          border
          :data="currentData"
          :header-cell-style="headerStyle"
          :cell-style="cellStyle"
          @selection-change="handleSelectionChange"
        >
          <!-- 复选框 -->
          <el-table-column
            type="selection"
            width="50"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            type="id"
            width="80"
            label="序号"
            prop="id"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            width="220"
            label="主题"
            header-align="center"
            align="center"
            v-if="flag===0">
          </el-table-column>
          <el-table-column
            prop="title"
            width="270"
            label="主题"
            header-align="center"
            align="center"
            v-if="flag===1">
          </el-table-column>
          <el-table-column
            prop="workID"
            width="220"
            label="上传人工号"
            header-align="center"
            align="center"
            v-if="flag===0">
          </el-table-column>
          <el-table-column
            prop="workID"
            width="270"
            label="上传人工号"
            header-align="center"
            align="center"
            v-if="flag===1">
          </el-table-column>
          <el-table-column
            prop="description"
            width="220"
            label="主要描述"
            header-align="center"
            align="center"
            v-if="flag===0">
          </el-table-column>
          <el-table-column
            prop="description"
            width="290"
            label="主要描述"
            header-align="center"
            align="center"
            v-if="flag===1">
          </el-table-column>
          <el-table-column
            prop="uploadDate"
            width="220"
            label="上传时间"
            header-align="center"
            align="center"
            v-if="flag===0">
          </el-table-column>
          <el-table-column
            prop="uploadDate"
            width="294"
            label="上传时间"
            header-align="center"
            align="center"
            v-if="flag===1">
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            label="操作"
            v-if="flag===0">
            <template slot-scope="scope">
              <el-button size="small" type="primary"  @click="handleLook(scope.row)">查 看</el-button>
              <!-- <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button> -->
              <el-button size="small" type="success" @click="handleDeploy(scope.row)">部 署</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px; margin-right: 20px">
          <el-pagination
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 8, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
        <!-- 弹窗，新增或修改 -->
        <el-dialog
              :title="textMap[dialogStatus]"
              :close-on-click-modal=true
              :visible.sync="dialogFormVisible"
              >
              <el-form
              class="Addform"
              :model="dataForm"
              ref="dataForm"
              @keyup.enter.native="dataFormSubmit()"
              label-width="110px"
              label-position="left"
              style="width: 400px; margin-left: 80px">
                <div class="right">
                  <el-row :gutter="15">
                      <el-form-item label="主题" style="width: 370px;" prop="dName" >
                        <el-input v-model="dataForm.title" ></el-input>
                      </el-form-item>
                      <el-form-item label="上传人工号" style="width: 370px;" prop="dClass">
                        <el-input v-model="dataForm.workID" ></el-input>
                      </el-form-item>
                      <el-form-item label="主要描述" style="width: 370px;" prop="dPrice">
                        <el-input v-model="dataForm.description" ></el-input>
                      </el-form-item>
                      <el-form-item label="上传时间" style="width: 370px;" prop="dAmount">
                        <el-input v-model="dataForm.uploadDate" ></el-input>
                      </el-form-item>
                  </el-row>
                </div>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogStatus === 'create' ? createData() : lookData()">确定</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Define',
  data() {
    return {
      tableData: [], // 表格中的数据
      currentData: [], // 当前页面的所有的数据
      multipleSelection: [], // 选定的多个复选框对象
      options: [{
        value: '设备编号',
        label: '设备编号'
      }, {
        value: '设备名称',
        label: '设备名称'
      }, {
        value: '设备类别',
        label: '设备类别'
      }],
      value: '',
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页选定的显示条数
      dataForm2: {}, // 想要查询的设备数据
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogFormVisible: false,
      dataForm: {},
      postId: 0,
      flag: 0
    }
  },
  // 生命周期
  mounted() {
    this.getDataList()
  },
  // 页码变化
  // const service = axios.create({
  //   baseURL:'localhost:8080'
  // }),
  watch: {
    tableData(newValue, oldValue) {
      this.currentData = newValue.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    CurrentPage(newValue, oldValue) {
      this.currentPage = this.tableData.slice((newValue - 1) * this.pageSize, newValue * this.pageSize)
    }
  },
  methods: {
    // 选择每页行数
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
    },
    // 选择页码
    handleCurrentChange(val) {
      this.currentPage = val
    },
    // 表格行高
    cellStyle() {
      return {
        'font-size': '14px',
        height: '45px',
        padding: '0'
      }
    },
    // 表头行高
    headerStyle() {
      return {
        height: '55px'
      }
    },
    // 选择的复选框的数量
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取数据列表
    getDataList() {
      this.flag = 0
      this.getRequest('/process/processFile').then((resp) => {
        if (resp) {
          // console.log('-------------------------------------------')
          console.log(resp)
          this.tableData = resp.data
          console.log(this.tableData)
          this.currentData = resp.data
        } else {
          console.log('失败')
        }
      })
    },
    // 定义流程按钮
    cimsInputClick() {
      window.location.href = 'http://localhost:8100/'
    },
    cimsInputClick2() {

    },
    // 查看已部署
    handleLookHistory() {
      this.flag = 1
      this.getRequest('/process/deploymentInfo').then((resp) => {
        if (resp) {
          // console.log('-------------------------------------------')
          console.log(resp)
          this.tableData = resp.data
          console.log(this.tableData)
          this.currentData = resp.data
        } else {
          console.log('失败')
        }
      })
    },
    // // 查询
    // searchDataList(data) {
    //   this.dataLoading = true
    //   this.getRequest('/device/' + this.dataForm2.devId).then((resp) => {
    //     if (resp) {
    //       // console.log('-------------------------------------------')
    //       console.log(resp)
    //       this.tableData = resp.data
    //       console.log(this.tableData)
    //       this.currentData = resp.data
    //     } else {
    //       console.log('查询失败')
    //     }
    //   })
    //   this.dataLoading = false
    //   // this.getDataList()
    // },
    // // 新增
    // handleCreate() {
    //   this.dialogFormVisible = true
    //   this.dialogStatus = 'create'
    // },
    // createData() {
    //   this.postRequest('/device', {
    //     devName: this.dataForm.devName,
    //     devClass: this.dataForm.devClass,
    //     devPrice: this.dataForm.devPrice,
    //     devAmount: this.dataForm.devAmount
    //   }).then((resp) => {
    //     if (resp) {
    //       console.log(resp)
    //       this.$message.success(resp.msg)
    //       this.getDataList()
    //     } else {
    //       console.log('新增失败')
    //     }
    //   })
    //   this.dialogFormVisible = false
    // },
    // 查看
    handleLook(data) {
      this.dialogFormVisible = true
      this.dialogStatus = 'look'
      this.postId = data.id
      this.dataForm = data
    },
    lookData() {
      this.putRequest('process/processFile', {
        title: this.dataForm.title,
        workID: this.dataForm.workID,
        description: this.dataForm.description,
        uploadDate: this.dataForm.uploadDate
      }).then((resp) => {
        if (resp) {
          console.log(resp)
          this.$message.success(resp.msg)
          this.getDataList()
        } else {
          console.log('更新失败')
        }
      })
      this.dialogFormVisible = false
      // this.getDataList()
    },
    // // 删除
    // handleDelete(data) {
    //   this.$confirm('此操作将永久删除【' + data.title + '】流程的所有信息，是否继续？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消'
    //   }).then(() => {
    //     this.deleteRequest('process/processFile/' + data.id).then((resp) => {
    //       console.log(resp)
    //       this.$message.success(resp.msg)
    //       this.getDataList()
    //       // this.$forceUpdate()
    //     })
    //   }).catch(() => {
    //     this.$message.info('已取消删除')
    //   })
    // },
    // 部署
    // handleDeploy(data) {
    //   this.$confirm('此操作将部署【' + data.title + '】流程，是否继续？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消'
    //   }).then(() => {
    //     this.getRequest('/process/deploy/' + data.id + data.username).then((resp) => {
    //       console.log(resp)
    //       this.$message.success(resp.msg)
    //       this.getDataList()
    //       // this.$forceUpdate()
    //     })
    //   }).catch(() => {
    //     this.$message.info('已取消部署')
    //   })
    // },
    // 部署2
    handleDeploy(data) {
      // console.log(window.sessionStorage.setItem('userInfo', 'wyt'))
      console.log(window.sessionStorage.getItem('userInfo'))
      var vv = window.sessionStorage.getItem('userInfo').username
      this.getRequest('/process/deploy/' + data.id + vv, {
        title: this.dataForm.title,
        workID: this.dataForm.workID,
        description: this.dataForm.description,
        uploadDate: this.dataForm.uploadDate
      }).then((resp) => {
        if (resp) {
          console.log(resp)
          this.$message.success(resp.msg)
          this.getDataList()
        } else {
          console.log('部署失败')
        }
      })
      // this.dialogFormVisible = false
      // this.getDataList()
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
.demo-form-inline{
  width: 97%;
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  margin-bottom: 0px;
}
.el-table{
  width: 97%;
  margin: 0px auto
}
.el-dialog__body{
  height: 150px !important;
  overflow: auto;
}
</style>
